<template>
  <el-sub-menu :index="menu?.path || menu?.group">
    <template #title>
      {{ menu?.label }}
    </template>
    <template
      v-for="item in menu?.children"
      :key="item.path"
    >
      <el-menu-item
        v-if="!item.children"
        :index="item.path"
        :route="item.path"
        @click="handleClick"
      >
        {{ item.label }}
      </el-menu-item>
      <SubMenuItem
        v-else
        :menu="item"
      />
    </template>
  </el-sub-menu>
</template>

<!-- <script lang="ts">
  export default {
    menu: 'SubMenuItem',
  };
</script> -->

<script setup lang="ts">
  import { toRefs } from 'vue';
  // import { MenuItem } from '@/menus/index';

  const props = defineProps({
    menu: {
      type: Object,
      default: (): any => ({ path: '/', label: '首页', group: '',  }),
    },
  });

  const { menu } = toRefs(props);

  const emits = defineEmits({
    check: null
  })
  const handleClick = (item:any) => {
    emits('check', item)
  }
</script>
